﻿{% extends 'base_content.html' %}

{% block css %}
    <!-- 本页样式表 -->
    <link href="/static/css/detail.css" rel="stylesheet"/>
{% endblock %}

{% block content %}
    <div class="blog-container">
        <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
            <a href="/home/" title="网站首页">网站首页</a>
            <a href="/article/" title="文章专栏">文章专栏</a>
            <a><cite>{{ detail.article_title }}</cite></a>
        </blockquote>
        <div class="blog-main">
            <div class="blog-main-left">
                <!-- 文章内容（使用Kingeditor富文本编辑器发表的） -->
                <div class="article-detail shadow">
                    <div class="article-detail-title">
                        {{ detail.article_title }}
                    </div>
                    <div class="article-detail-info">
                        <span>编辑时间：{{ detail.publish_time|date:'Y-m-d H:i:s' }}</span>
                        <span>作者：{{ detail.user.user_name }}</span>
                        <span>浏览量：{{ detail.article_views }}</span>
                    </div>
                    <div class="article-detail-content">
                        {{ detail.article_content|safe }}
                    </div>
                </div>
                <!-- 评论区域 -->
                <div class="blog-module shadow" style="box-shadow: 0 1px 8px #a6a6a6;">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-bottom:0">
                        <legend>来说两句吧</legend>
                        <div class="layui-field-box">
                            <form class="layui-form blog-editor" method="post" action="/artcle/detail/{{ detail.id }}">
                                <div class="layui-form-item">
                                    <input type="text" name="user_id" class="layui-input">
                                </div>
                                <div class="layui-form-item">
                                        <textarea name="content" lay-verify="content" id="remarkEditor"
                                                  placeholder="请输入内容" class="layui-textarea layui-hide"></textarea>
                                </div>
                                <div class="layui-form-item">
                                    <input type="submit" class="layui-btn" value="提交评论">
                                </div>
                            </form>
                        </div>
                    </fieldset>
                    <div class="blog-module-title">最新评论</div>
                    <ul class="blog-comment">
                        {% for comment in comments %}
                            <li>
                                <div class="comment-parent" style="margin-bottom: 25px">
                                    <img src="/static/images/Absolutely.jpg" alt="absolutely"/>
                                    <div class="info">
                                        <span class="username">{{ comment.user.user_name }}</span>
                                        <span class="time">{{ comment.comments_time|date:'Y-m-d H:i:s' }}</span>
                                    </div>
                                    <div class="content" style="line-height: 30px;width: 100%">
                                        {{ comment.comments_content }}
                                    </div>
                                </div>
                            </li>
                        {% empty %}
                            <div>暂无数据</div>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="blog-main-right">
                <!--右边悬浮 平板或手机设备显示-->
                <div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
                <!--这个div位置不能改，否则需要添加一个div来代替它或者修改样式表-->
                <div class="article-category shadow">
                    <div class="article-category-title">分类导航</div>
                    <!-- 点击分类后的页面和artile.html页面一样，只是数据是某一类别的 -->
                    <a href="javascript:layer.msg(&#39;切换到相应分类&#39;)">ASP.NET MVC</a>
                    <a href="javascript:layer.msg(&#39;切换到相应分类&#39;)">SQL Server</a>
                    <a href="javascript:layer.msg(&#39;切换到相应分类&#39;)">Entity Framework</a>
                    <a href="javascript:layer.msg(&#39;切换到相应分类&#39;)">Web前端</a>
                    <a href="javascript:layer.msg(&#39;切换到相应分类&#39;)">C#基础</a>
                    <a href="javascript:layer.msg(&#39;切换到相应分类&#39;)">杂文随笔</a>
                    <div class="clear"></div>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title">相似文章</div>
                    <ul class="fa-ul blog-module-ul">
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">基于laypage的layui扩展模块（pagesize.js）！</a>
                        </li>
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">基于laypage的layui扩展模块（pagesize.js）！</a>
                        </li>
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">基于laypage的layui扩展模块（pagesize.js）！</a>
                        </li>
                    </ul>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title">随便看看</div>
                    <ul class="fa-ul blog-module-ul">
                        <li><i class="fa-li fa fa-hand-o-right"></i><a
                                href="detail.html">一步步制作时光轴（一）（HTML篇）</a></li>
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">ASP.NET
                            MVC制作404跳转（非302和200）</a></li>
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">ASP.NET MVC
                            防范跨站请求伪造（CSRF）</a></li>
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">一步步制作时光轴（三）（JS篇）</a>
                        </li>
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">基于laypage的layui扩展模块（pagesize.js）！</a>
                        </li>
                        <li><i class="fa-li fa fa-hand-o-right"></i><a
                                href="detail.html">一步步制作时光轴（二）（CSS篇）</a></li>
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">写了个Win10风格快捷菜单！</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <!-- 比较好用的代码着色插件 -->
    <script src="/static/js/prettify.js"></script>
    <!-- 本页脚本 -->
    <script src="/static/js/detail.js"></script>
{% endblock %}